import React, { useState, useEffect, useImperativeHandle, forwardRef } from 'react';
import { Select, Input, Checkbox } from 'antd';
import ConfigTable from '../../../../components/configTable';
import { POSITION, TYPE_OPTIONS } from '../../../../../../utils/constant';
import EnterParamMore from '../../../components/Add/moreParam';
import Modal from '../../../../../../components/Modal';

const EnterParam = forwardRef((props, ref) => {
  const { value } = props;
  const [data, setData] = useState([]);

  const defaultData = {
    name: '',
    position: 2,
    type: 0,
    nonEmpty: 1,
    desc: '',
    isParse: 0,
  };

  useEffect(() => {
    value.params && setData(value.params);
  }, [value.params]);

  useImperativeHandle(ref, () => ({
    getData: () => {
      const { thirdInterfaceId } = value;
      data.length &&
        data.forEach((item) => {
          item.thirdParamList &&
            item.thirdParamList.forEach((item) => {
              item['interfaceId'] = thirdInterfaceId;
              item['paramId'] = item.id;
            });
        });
      return data;
    },
  }));

  const handleChange = (value, index, key) => {
    const temp = [...data];
    if (key === 'name') {
      const new_value = value.match(/[0-9a-zA-Z_.]{1,50}/);
      temp[index][key] = new_value ? new_value[0] : '';
      return setData(temp);
    }
    temp[index][key] = value;
    setData(temp);
  };

  const cusColumns = [
    {
      title: '参数名',
      dataIndex: 'name',
      render: (text, _, index) => (
        <Input
          value={text}
          maxLength={30}
          placeholder='请输入'
          onChange={(e) => handleChange(e.target.value, index, 'name')}
        />
      ),
    },
    {
      title: '参数位置',
      dataIndex: 'position',
      render: (text, _, index) => (
        <Select placeholder='请选择' value={text} onChange={(value) => handleChange(value, index, 'position')}>
          {POSITION.map((item) => (
            <Select.Option value={item.value} key={item.value}>
              {item.label}
            </Select.Option>
          ))}
        </Select>
      ),
    },
    {
      title: '类型',
      dataIndex: 'type',
      render: (text, _, index) => (
        <Select placeholder='请选择' value={text} onChange={(value) => handleChange(value, index, 'type')}>
          {TYPE_OPTIONS.map((item, index) => (
            <Select.Option value={index} key={index}>
              {item}
            </Select.Option>
          ))}
        </Select>
      ),
    },
    {
      title: '必填',
      dataIndex: 'nonEmpty',
      render: (text, _, index) => (
        <Checkbox checked={!text} onChange={(e) => handleChange(e.target.checked ? 0 : 1, index, 'nonEmpty')} />
      ),
    },
    {
      title: '描述',
      dataIndex: 'desc',
      render: (text, _, index) => (
        <Input
          value={text}
          maxLength={256}
          placeholder='不超过256字符'
          onChange={(e) => handleChange(e.target.value, index, 'desc')}
        />
      ),
    },
    {
      title: '对应参数名',
      dataIndex: 'thirdParamList.name',
      render: (_, { thirdParamList }) =>
        thirdParamList && thirdParamList.map((item, index) => <p key={index}>{item.name}</p>),
    },
    {
      title: '对应参数位置',
      dataIndex: 'thirdParamList.positionLabel',
      render: (_, { thirdParamList }) =>
        thirdParamList && thirdParamList.map((item, index) => <p key={index}>{item.positionLabel}</p>),
    },
    {
      title: '对应类型',
      dataIndex: 'thirdParamList.typeLabel',
      render: (_, { thirdParamList }) =>
        thirdParamList && thirdParamList.map((item, index) => <p key={index}>{item.typeLabel}</p>),
    },
  ];

  const cusOperates = [
    {
      label: '更多',
      method: (reocrd, index) => handleMore(reocrd, index),
    },
  ];

  const handleMore = (record, index) => {
    Modal.open({
      title: '更多',
      width: '660px',
      content: (
        <EnterParamMore
          value={record}
          closeModal={() => Modal.close()}
          onChange={(value) => handleMoreChange(value, index)}
        />
      ),
      isOkBtn: false,
      isCancelBtn: false,
    });
  };

  const handleMoreChange = (value, index) => {
    const tempData = [...data];
    tempData[index] = { ...tempData[index], ...value };
    setData(tempData);
  };

  return (
    <ConfigTable
      data={data}
      onChange={setData}
      cusColumns={cusColumns}
      cusOperates={cusOperates}
      defaultData={defaultData}
      isAdd={false}
      isDelete={false}
    />
  );
});
export default EnterParam;
